<template>
    <div class="xf-site xf-content-top">
        <h3><img v-lazy="icon" alt="">{{ title }}<i></i></h3>
        <ul class="xf-shadow-int">
            <li v-for="item in sites" :key="item.id">
                <a :href="item.link" target="_blank" rel="noopener noreferrer" class="xf-shadow-out">
                    <span>{{ item.name }}</span>
                    <img v-lazy="item.img" :alt="item.name">
                </a>
                <p>{{ item.name }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="SiteModule">
    import { storeToRefs } from 'pinia'
    import { useSiteModuleStore } from '@/store'
    
    const siteModuleStore = useSiteModuleStore()
    const { title, icon, sites } = storeToRefs(siteModuleStore)
</script>

<style scoped lang="less">
    .xf-site {
        width: 100%;

        h3 {
            position: relative;
            font-size: 1.35rem;
            text-align: left;
            height: 50px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;

            img {
                width: 1.25em;
                margin-right: .35em;
            }

            i {
                display: inline-block;

                &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 45px;
                    width: 10px;
                    height: 10px;
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
                    background: var(--nitai5-color-13) !important;
                    -webkit-box-shadow: var(--nitai5-shadow-box-1);
                    box-shadow: var(--nitai5-shadow-box-1);
                    border-radius: 50%;
                }
            }
        }

        ul {
            padding: 1.5em .75em;
            overflow-y: auto;

            li {
                width: 95%;
                height: auto;
                margin: 1.25em auto 0;

                &:first-child {
                    margin-top: 0;
                }

                a {
                    position: relative;
                    display: block;
                    width: 100%;
                    border-radius: 10px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        -webkit-transition: -webkit-transform .5s;
                        transition: -webkit-transform .5s;
                        -o-transition: transform .5s;
                        transition: transform .5s;
                        transition: transform .5s, -webkit-transform .5s;
                    }

                    span {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        font: bold 1.5em '宋体', 'SimSun';
                        color: var(--nitai5-color-2);
                        background-color: var(--nitai5-rgb-color-1);
                        -webkit-backdrop-filter: blur(1px);
                        backdrop-filter: blur(1px);
                        opacity: 0;
                        -webkit-transition: opacity .5s;
                        -o-transition: opacity .5s;
                        transition: opacity .5s;
                        z-index: 2;
                    }

                    &:hover {
                        img {
                            -webkit-transform: scale(1.2) rotate(-5deg);
                            -ms-transform: scale(1.2) rotate(-5deg);
                            transform: scale(1.2) rotate(-5deg);
                        }

                        span {
                            opacity: 1;
                        }
                    }
                }

                p {
                    margin-top: 8px;
                    font-size: 1.25em;
                }
            }
        }
    }
</style>